<template>
  <div class="priority">
    <span class="state_icon_color" :class="stateColor">{{data.priorityTypeLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'Priority',
  props: {
    data: Object
  },
  computed: {
    // 根据优先级返回相应class
    stateColor() {
      switch (this.data.priorityTypeValue) {
        case '1':
          // 一般
          return 'priority_1'
        case '2':
          // 紧急
          return 'priority_2'
        case '3':
          // 特急
          return 'priority_3'
        default:
          return ''
      }
    }
  }
}
</script>

<style scoped lang="less">
  /* 优先级颜色 */
  // 一般
  @priority1: #00b4ff;
  // 紧急
  @priority2: #ff931f;
  // 特急
  @priority3: #f8000f;

  .priority{
    .state_icon_color{
      // 一般
      &.priority_1:before{
        background-color: @priority1;
      }
      // 紧急
      &.priority_2:before{
        background-color: @priority2;
      }
      // 特急
      &.priority_3:before{
        background-color: @priority3;
      }
    }
  }
</style>
